<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <!-- 1. 引入 Vue -->
		   <script src="https://unpkg.com/vue@3"></script> 
	</head>
	<body>
		   <!-- 我们的 Vue 应用将挂载在这里 -->
		    <div id="app">
				{{message}}
				
			</div>
			
	</body>
	
	<script>
		  // 3. 使用 Vue.createApp 创建应用实例
	    const { createApp } = Vue; // 从全局 Vue 对象中解构出 createApp
		 const app =createApp({
			 data(){
				 return {
					 "message":"vue>>>>>>>>>>>",
				 }
			 },
			 
		 });
		 
		 app.mount("#app");
		
	</script>
</html>
/*****
const { createApp } = Vue;
这行代码是 ES6 中的对象解构赋值 (Object Destructuring Assignment) 语法。
它是一种非常简洁和现代的 JavaScript 写法。 
1. 核心作用
这行代码的核心作用是：从全局的 Vue 对象中，提取出名为 createApp 的属性，并将其赋值给一个新的、
同样名为 createApp 的常量（const）。
简单来说，它是下面这行代码的语法糖：
const createApp = Vue.createApp;
在引入 Vue.js 之后，Vue 会在全局（window 对象）上注册一个名为 Vue 的对象。这个对象包含了所有 Vue 的公共 API，
例如 createApp、reactive、ref 等。
2. 为什么要这样写？（优点）
使用解构赋值主要有以下几个好处：
1. 代码更简洁、可读性更高
当你需要从一个对象中提取多个属性时，优势尤为明显。
没有解构赋值：
const createApp = Vue.createApp;
const reactive = Vue.reactive;
const ref = Vue.ref;
使用解构赋值：
const { createApp, reactive, ref } = Vue;
可以看到，使用解构赋值可以在一行代码内完成多个变量的声明和赋值，代码更紧凑，意图也更清晰。
2. 避免重复书写 Vue.
在后续的代码中，你可以直接使用 createApp(...)，而不需要每次都写 Vue.createApp(...)。
这让代码看起来更干净，也更符合函数式编程的风格。
没有解构赋值：
const app = Vue.createApp({
    // ...
});
使用解构赋值：
const app = createApp({
    // ...
});

工作原理：对象解构赋值
ES6 的对象解构赋值允许你按照与对象属性匹配的模式，从对象中提取值并赋给变量。
const { propertyName: variableName } = object; 
propertyName: 你想要从对象中提取的属性名。
variableName: 你想要赋值给的变量名。
如果变量名和属性名相同，可以省略冒号和变量名：
// 等同于 const { propertyName: propertyName } = object;
const { propertyName } = object;

****/